import { useState } from "react";
import {
  Layout,
  Menu,
  Input,
  Button,
  List,
  Typography,
  Avatar,
  Card,
} from "antd";
import {
  SearchOutlined,
  StarOutlined,
  ForkOutlined,
  TeamOutlined,
  HistoryOutlined,
} from "@ant-design/icons";
import styles from "./index.module.less";

const { Sider, Content } = Layout;
const { Title, Text } = Typography;

const GiteeSearch: React.FC = () => {
  const [searchText, setSearchText] = useState("");

  const handleSearch = (value: string) => {
    console.log("搜索:", value);
  };

  const activities = [
    {
      user: "刘良才",
      action: "推送到了",
      repo: "GeneratedPages",
      branch: "processCenter_cursor",
    },
    {
      user: "刘良才",
      action: "推送了新的分支",
      repo: "GeneratedPages",
      branch: "processCenter_cursor",
    },
    {
      user: "刘良才",
      action: "删除了",
      repo: "GeneratedPages",
      branch: "processCenter",
    },
    {
      user: "刘良才",
      action: "推送了新的标签",
      repo: "GeneratedPages",
      branch: "deleted_processCenter_20250430_061618",
    },
    {
      user: "刘良才",
      action: "推送了新的分支",
      repo: "GeneratedPages",
      branch: "processCenter",
    },
  ];

  const commonRepos = [
    { name: "GeneratedPages", icon: "G" },
    { name: "DLV_Agent_tools", icon: "D" },
  ];

  const capabilities = [
    {
      code: "(https?|ftp)://[^/s/?#].[^s]*",
      desc: "匹配URL的表达式，支持大多数正则表达式写法.支持的正则关键字包含：(、)、^、$、.、[、*、+、?",
    },
    {
      code: "render template",
      desc: "搜关键字 render 且包含template",
    },
    {
      code: "render or template",
      desc: "搜关键字 render 或 template",
    },
    {
      code: "render filejava",
      desc: "搜关键字 render 文件名包含java",
    },
    {
      code: "render r:scan",
      desc: "搜关键字 render 在仓库路径包含scan",
    },
  ];

  return (
    <Layout className={styles.container} data-oid="69hkdnj">
      <Sider width={300} className={styles.sider} data-oid="56mr0l0">
        <div className={styles.sidebarContent} data-oid="ox67lh7">
          <Title level={4} data-oid="jg7l42c">
            我的仓库
          </Title>
          <Input.Search
            placeholder="请输入关键字搜索"
            onSearch={handleSearch}
            className={styles.searchInput}
            data-oid="30:u37-"
          />

          <Button
            type="primary"
            block
            className={styles.searchButton}
            data-oid="6ux54j6"
          >
            查找所有代码库
          </Button>

          <Menu mode="inline" className={styles.menu} data-oid="j9ytz-:">
            <Menu.SubMenu
              key="repos"
              title="我的仓库"
              icon={<SearchOutlined data-oid=".a8hng7" />}
              data-oid="zz4jfpm"
            >
              <Menu.Item key="active-repos" data-oid="dyk.o9t">
                我的活跃仓库
              </Menu.Item>
              <Menu.Item key="starred-repos" data-oid="ish7g:p">
                星标仓库
              </Menu.Item>
              <Menu.Item key="forked-repos" data-oid="6_5y0-y">
                Fork仓库
              </Menu.Item>
            </Menu.SubMenu>

            <Menu.SubMenu
              key="orgs"
              title="我的组织"
              icon={<TeamOutlined data-oid="uj53s1o" />}
              data-oid="nt7e.u8"
            >
              <Menu.Item key="all-orgs" data-oid="6wf2hua">
                查看所有组织
              </Menu.Item>
            </Menu.SubMenu>

            <Menu.SubMenu
              key="activities"
              title="动态"
              icon={<HistoryOutlined data-oid="o6fm5xn" />}
              data-oid="mp:.xq:"
            >
              <Menu.Item key="frontend-efficiency" data-oid="5sadp2i">
                前端提效
              </Menu.Item>
              <Menu.Item key="process-data-room" data-oid="8b6jvl2">
                过程数据室
              </Menu.Item>
            </Menu.SubMenu>
          </Menu>

          <List
            className={styles.activityList}
            dataSource={activities}
            renderItem={(item) => (
              <List.Item data-oid="1hmom1:">
                <Text data-oid="gn.5-gw">
                  <a href="#" data-oid="gt5075i">
                    {item.user}
                  </a>
                  {item.action}
                  <code data-oid="le0mfke">{item.repo}</code>
                  {item.branch && `的${item.branch}分支`}
                </Text>
              </List.Item>
            )}
            data-oid="j3uhn_j"
          />
        </div>
      </Sider>

      <Content className={styles.content} data-oid="7g46ovz">
        <div className={styles.header} data-oid="hfj7_3r">
          <Menu
            mode="horizontal"
            selectedKeys={["code-search"]}
            data-oid="qp806:7"
          >
            <Menu.Item key="code-search" data-oid="1.9ju5t">
              代码搜索
            </Menu.Item>
            <Menu.Item key="activity" data-oid="fxpz_1p">
              动态
            </Menu.Item>
            <Menu.Item key="pull-requests" data-oid="6ckqcy.">
              Pull Requests
            </Menu.Item>
            <Menu.Item key="issues" data-oid="g5pt319">
              Issues
            </Menu.Item>
          </Menu>
        </div>

        <Title level={2} data-oid="g4hxohu">
          Gitee Search
        </Title>

        <div className={styles.searchBar} data-oid="qzqdxw7">
          <Input
            placeholder="使用'/'可进行搜索唤醒"
            value={searchText}
            onChange={(e) => setSearchText(e.target.value)}
            className={styles.mainSearch}
            data-oid="z545yq1"
          />

          <Text type="secondary" data-oid="85uzjnj">
            搜索范围为您有权限的仓库，如需全局搜索，请提交工单-申请码云管理员协助导出或处理数据
          </Text>
        </div>

        <Card title="常用代码库" className={styles.section} data-oid="g.zj-15">
          <List
            dataSource={commonRepos}
            renderItem={(item) => (
              <List.Item data-oid="awaep4t">
                <Avatar data-oid="kbz3dzn">{item.icon}</Avatar>
                <Text className={styles.repoName} data-oid="h9nrdgr">
                  {item.name}
                </Text>
              </List.Item>
            )}
            data-oid="bj57y4q"
          />
        </Card>

        <Card title="历史搜索" className={styles.section} data-oid="s_zx_9b" />

        <Card title="高级搜索" className={styles.section} data-oid="-ev4.pp">
          <Button type="link" data-oid="xlpc193">
            范围过滤
          </Button>
        </Card>

        <Card
          title="以下能力需要开启高级搜索功能才可使用:"
          className={styles.section}
          data-oid="k85nu9u"
        >
          <List
            dataSource={capabilities}
            renderItem={(item) => (
              <List.Item data-oid="fd-6p75">
                <code data-oid="bhzlgs6">{item.code}</code>
                <Text type="secondary" data-oid="4r2g0in">
                  {item.desc}
                </Text>
              </List.Item>
            )}
            data-oid="sl1bkvh"
          />
        </Card>
      </Content>
    </Layout>
  );
};

export default GiteeSearch;
